<template>
  <div>
    <vue-particles
      class="login-background"
      color="#97D0F2"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="polygon"
      :particleSize="4"
      linesColor="#97D0F2"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <el-card class="box-card">
      <h3 style="margin-bottom: 30px">华安药店药品管理系统</h3>
      <el-form :model="form" :rules="rules" class="login_title" ref="form">
        <el-form-item label="账号：" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <div class="verifyInput">
          <el-form-item label="验证码：" prop="vercode">
            <el-input type="text" v-model="form.vercode"></el-input>
            <img
              :src="vercodeImg"
              alt="验证码无法加载"
              @click="changeVercodeImg"
              crossorigin="anonymous"
            />
          </el-form-item>
        </div>

        <div style="display: flex; margin-left: 30%">
          <el-button type="primary" @click="tryLogin">登录</el-button>
          <el-button type="success" @click="tryRegister">注册</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { login } from "@/api/index";
import Cookie from "js-cookie";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        vercode: "",
      },
      vercodeImg: "http://localhost:8066/api/admin/vercode?time=" + new Date(),
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        vercode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    tryLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //token
          login(this.form).then(({ data }) => {
            if (data.code == 200) {
              const msg = data.data;
              // console.log(data);
              //token信息存入cookie用于不同的页面间通讯
              // Cookie.set("token", token);
              //自动存入token
              //跳转到首页
              this.$router.push("home");
            }
          });
        }
      });
    },
    tryRegister() {
      this.$router.push("register");
    },
    changeVercodeImg() {
      this.vercodeImg =
        "http://localhost:8066/api/admin/vercode?time=" + new Date();
    },
  },
};
</script>

<style lang="less" scoped>
.login-background {
  background: linear-gradient(-180deg, #74e3ff 0%, #dfedfc 100%);
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
}
.box-card {
  position: absolute;
  height: 500px;
  width: 400px;
  margin: 180px 0 0 calc(calc(100vw - 410px) / 2);
  padding: 0px 35px 15px 35px;
  border-radius: 20px;
  h3 {
    text-align: center;
    color: rgb(107, 107, 107);
  }
}
</style>
